<template>
  <div class="container">
    <div class="container-body">
      <template>
        <div class="title-space">
          <span>{{ $t("page.ODvalue") }}：</span>
        </div>
        <div v-for="(listItem, listIndex) in originalData" :key="listIndex">
          <div class="overflow">
            <!-- 大 - 数据表格 -->
            <table id="table-1">
              <tr
                v-for="(table, key, index) in setListItem(listItem)"
                :key="index"
              >
                <!-- 浓度 -->
                <td class="color-000">
                  {{ key !== "time" ? key : $t("page.label") }}
                </td>
                <td v-for="(iTable, index) in table" :key="index">
                  <span v-if="key !== 'time'">{{ iTable }}</span>
                  <span class="color-000" v-else>{{ iTable + "s" }}</span>
                </td>
              </tr>
              (
            </table>
          </div>

          <div class="space">
            <div class="title-space">
              <span>{{ $t("page.ODrate") }}（%）： </span>
            </div>

            <div
              class="overflow"
              v-for="(lightRateItem, lightRateIndex) in lightRate"
              :key="lightRateIndex"
            >
              <table id="table-1">
                <tr v-for="(table, key, index) in lightRateItem" :key="index">
                  <td class="color-000">
                    {{ key !== "time" ? key : $t("page.hole") }}
                  </td>
                  <td>
                    <span v-if="key !== 'time'">
                      {{ beforeLable[index - 1] }}{{ unit }}
                    </span>
                    <span class="color-000" v-else>
                      {{ $t("page.parameter") }}
                    </span>
                  </td>
                  <td v-for="(iTable, index) in table" :key="index">
                    <span v-if="key !== 'time'">{{ iTable }}</span>
                    <span class="color-000" v-else>{{ iTable + "s" }}</span>
                  </td>
                </tr>
              </table>
            </div>
          </div>

          <!-- 线型echarts -->
          <linePointDiagram
            v-show="graphicalList.includes(1) || graphicalList.includes('1')"
            style="margin-top: 40px"
            :value="resultFormatValue"
            :title="$t('page.originalFigure')"
            :markLine="dissociation"
            @generateImg="shotImg(graphicalList.includes(1), 0, $event)"
          ></linePointDiagram>
          <!-- <saccharoseLine
            v-show="graphicalList.includes(1) || graphicalList.includes('1')"
            style="margin-top: 40px"
            :originalData="originalData"
            id="waveRate123"
            :title="$t('page.originalFigure')"
            :resultValue="resultValue"
            :sprone_dissociation="dissociation"
            @showImg="shotImg(graphicalList.includes(1), 0, $event)"
          ></saccharoseLine> -->
          <linePointDiagram
            v-show="graphicalList.includes(2) || graphicalList.includes('2')"
            style="margin-top: 40px"
            :value="reductionWater"
            :title="$t('page.originalFigure')"
            :markLine="dissociation"
            @generateImg="shotImg(graphicalList.includes(2), 1, $event)"
          ></linePointDiagram>

          <FittedCurve
            v-show="graphicalList.includes(3) || graphicalList.includes('3')"
            style="margin-top: 40px"
            :originalData1="subtract"
            :originalData2="fittedingList"
            :resultValue="resultValue"
            :dissociation="dissociation"
            :title="$t('page.dissociationData')"
            @showImg="shotImg(graphicalList.includes(3), 2, $event)"
          ></FittedCurve>
        </div>

        <!-- 计算结果 -->
        <div class="title-space">
          <span>{{ $t("page.calResultes") }}：</span>
          <el-button type="text" @click="downloadExl()" size="mini">{{
            $t("page.export")
          }}</el-button>
        </div>
        <div>
          <div class="title-space">
            <span>{{ $t("page.molecular") }}（Da）：</span>
            {{ mole }}
          </div>
          <table id="table-1" style="width: 100%;">
            <template v-for="(resValue, resIndex) in paramResult">
              <tr>
                <td v-for="(v, k, i) in resValue" :key="i">
                  <span class="k">K</span>{{ k.slice(1, 2) }}
                </td>
              </tr>
              <tr>
                <td v-for="(v, k, i) in resValue" :key="i">{{ v }}</td>
              </tr>
            </template>
          </table>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import waveChart from "@/components/WaveChart";
import { fetchUploadExl } from "@/api/table";
import { setStore, getStore } from "@/utils/common";
import { getToken } from "@/utils/auth";
import { COLORLIST } from "@/utils/variate";
import saccharoseLine from "./saccharoseLine.vue";
import FittedCurve from "./fittedCurve.vue";
import linePointDiagram from '@/commonPage/linePointDiagram'
import { formatData } from '@/commonPage/linePointDiagram/formatData'

export default {
  props: {
    computedResultValue: {
      type: Object,
      default: () => {},
    },
    baseStepImg: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      graphicalList: [1, 2, 3],
      originalData: [],
      originalDataRate: [],
      lightRate: [],
      markLineValue: null,
      stepTwoList: [],
      computeLoading: false, //显示计算loading
      computeAllowed: true, //防连点
      isShowInputLog: false, //是否显示公式
      isShowStepOne: false, //是否显示第一步表格
      isShowStepTwo: false, //是否显示第二步表格
      showScreenshotsImg: true, //页面上的曲线隐藏
      isShowUpload: true,
      isShowUploadtxt: false,
      uploadFile: {},
      // mole: '115207373',
      unit: "μg/ml",
      unitOption: ["pg/ml", "ng/ml", "μg/ml", "mg/ml"],
      isShowPer: false,
      percentage: 0,
      customColor: "#e6a23c",
      allLightRateCharts: [],
      allStepOneCharts: [],
      isRepeatSubmit: false,
      extA: "",
      imgList: "",
      lang: getStore("spr-lang") || "zh", // 语言类型
      unitTitle: [],
      parameter: [],
      waveName: [], // 浓度数据
      beforeLable: [], // 标签数据
      baseStepOne: [],
      doDownload: false,
      // paramResult: [],
      dissociation: [], // 结合解离标识线数据
      sprone_dissociation: [], // 原始、归零 标识线数据
      dissType: "",
      // formulaValue: 0, // 公式选择
      uploadExcel: {
        excel1: null, // 上传的第一个表格
        excel2: null, // 上传的第二个表格
      },
      isShowExcel: "true", // 判断展示哪个上传
      isLoading: false, // 上传按钮loading
      resultValue: {}, // 计算之后的结果
      tooltipList: [], // 用于echarts的tooltip数组
      colorList: COLORLIST, // 颜色列表
      reductionWater: [], // 蔗糖减水全光谱
      subtract: [], // 光谱差
      zero: "0", // 是否归零
      formulaValue: 0, // 公式选择
      mole: "115207373",
      paramResult: [], // 分子量表格
      fittedingList: [],
      // 是否全填
      isComplete: true,
      completeList: [],
      resultFormatValue: {},

      fitting: 0,
    };
  },
  components: {
    linePointDiagram,
    saccharoseLine,
    FittedCurve,
  },
  watch: {
    computedResultValue: {
      handler(value) {
        this.$nextTick(() => {
          this.initValue(value);
        });
      },
      // immediate: true,
      deep: true,
    },
  },
  methods: {
    setListItem(data) {
      const obj = {};
      const obj1 = {};
      for (const k in data) {
        if ("time" === k) {
          obj[k] = data[k];
        } else {
          obj1[k] = data[k];
        }
      }
      return { ...obj, ...obj1 };
    },

    // 修改数据-点击出现弹窗
    changLogData() {
      this.isRepeatSubmit = true;
      this.isShowInputLog = true;
      this.doDownload = false;
      // this.beforeLable = []
    },

    downloadExl() {
      let lang = this.lang === "zh" ? "CN" : "ENG";
      const href = `${
        process.env.BASE_URL
      }receive/download/excel/6/${lang}/${getStore("auuid")}`;
      window.open(href, "_blank");
    },

    /* 生成excali表格 */
    async imgUpLoad(value) {
      await fetchUploadExl({
        crpValue: value,
        uuid: getStore("auuid"),
        imgBase64: [...this.baseStepImg, ...this.baseStepOne],
      });
    },
    initValue(data) {
      this.paramResult = [];
      this.originalData = [];
      this.reductionWater = {};
      this.subtract = [];
      // echarts,legend数据
      this.resultValue = data.resultValue;
      // 最小的计数器的key
      // this.minKey = data.minKey
      this.timeMap = data.timeMap;
      // 表格数据
      this.originalData = data.originalDataList_original;
      // 原始图
      this.resultFormatValue = {
        ...formatData(data.originalDataList_original[0]),
      }
      // 归零图
      this.reductionWater = {
        ...formatData(data.originalDataList_zero[0]),
      }
      // 结合解离
      this.subtract = data.originalData_hl_merge;
      this.fittedingList = data.originalData_hl_merge_fitting;
      console.log(this.subtract, this.fittedingList)
      // 分子量表格数据
      this.paramResult = data.paramResult;
      // 结合解离 分界线
      this.dissociation = data.dissociation;
      // 原始、归零分界线
      this.sprone_dissociation = data.sprone_dissociation;
      this.dissType = data.extB;
      // 判断显示那个图形
      this.graphicalList = data.imageSwitcher;
      // 处理 详情底部结合解离点 数量
      this.completeList = data.hole.map((item) => {
        return {
          key: item,
          start_jiehe: "",
          end_jiehe: "",
          start_jieli: "",
          end_jieli: "",
        };
      });
      if (this.isRepeatSubmit) {
        setStore("auuid", data.uuid);
      }
      let _this = this;
      setTimeout(() => {
        _this.imgUpLoad(data.crpValue);
      }, 1500);
    },

    newDrawChart() {
      // const dissocArry = this.dissociation
      // const disscoType = this.dissType
      this.allLightRateCharts = [];
      this.allStepOneCharts = []; // 线形图数据

      this.lightRate.forEach((item) => {
        let chartsOption = {
          title: {
            text: "",
          },
          animation: false,
          tooltip: {
            trigger: "axis",
          },

          color: COLORLIST,
          legend: {
            icon: "circle",
            data: [],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          // 保存为图片
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
            },
            boundaryGap: false,
            data: [],
          },
          yAxis: {
            type: "value",
            splitNumber: 8,
          },
          series: [],
        };
        chartsOption.series = [];
        chartsOption.xAxis.data = [];
        let num = 0;

        for (let i in item) {
          if (i !== "time") {
            let chartSeries = {
              name: `${this.beforeLable[num]}`,
              type: "line",
              // smooth: true,
              showSymbol: false,
              hoverAnimation: false,
              data: item[i],
            };
            chartsOption.title.text =
              this.$t("page.ODrate") + this.$t("page.curve");
            chartsOption.legend.data.push(`${this.beforeLable[num]}`);
            chartsOption.series.push(chartSeries);
            num++;
          } else {
            chartsOption.xAxis.data = item[i];
          }
        }
        this.allLightRateCharts.push(chartsOption);
      });

      let _this = this;
      setTimeout(() => {
        _this.showScreenshotsImg = false;
      }, 1500);
    },

    shotImg(isPush, index, data) {
      if (!isPush) return;
      this.baseStepOne[index] = data;
    },
  },
  computed: {
    headerUpload: () => {
      const data = {};
      data.TOKEN = getToken();
      if (localStorage.getItem("spr-lang") === "en") {
        data.LANG = "ENG"; // 传语言
      }
      return data;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog--center .el-dialog__body {
    display: flex;
    justify-content: center;
  }
}

.completeBox {
  height: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  .complete_Item {
    display: inline-block;
    margin-right: 30px;
    text-align: center;
    p {
      display: flex;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
      .el-input {
        width: 200px;
      }
    }
  }
}
.overflow {
  .title-space {
    font-size: 18px;
    font-weight: 700;
    span {
      font-size: 18px;
      font-weight: 700;
    }
  }
  #table-1 {
    width: 100%;
  }
}
.upload-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-btn {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  /deep/ .el-button--primary {
    width: 160px;
  }
}
.space {
  display: flex;
  margin: 0;
  .space-title,
  .label-title {
    width: 120px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .space-title::before {
    content: "*";
    color: red;
    margin-right: 2px;
  }
}
.space-unit {
  margin-bottom: 20px;
}
.space-btn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  // margin-left: 250px;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
}
.reset-back {
  display: flex;
  align-items: center;
  // margin: 0 20px 20px;
  .link {
    cursor: pointer;
    color: #409eff;
    font-style: normal;
    margin-right: 20px;
  }
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

// 计数器部分的样式
.each-numberBox {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  .computed-text {
    width: 80px;
    margin-right: 6px;
    text-align: end;
    .computed-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
.space-time {
  display: flex;
}
</style>
